<template>
  <div class="container">
    <div class="header">
      <div class="title">智慧航道</div>
      <div class="menu">
        <div class="item" @click="router.push({ path: '/channelIndex' })">总体概况</div>
        <div class="item active">更多</div>
      </div>
    </div>
    <div class="main">
      <div class="side-content">
        <div class="item" style="margin-bottom: 12px;">
          <div class="top">
            <div class="title" style="display: flex;align-items: center;">
              <div>桥梁净高监测</div>
              <el-select
                v-model="bridge"
                filterable
                placeholder="请选择"
                @change="changeBridge"
                style="margin-left: 28px;"
                v-if="isShowMore5 === true"
              >
                <el-option
                  v-for="item in bridgeData"
                  :key="item.bridgeName"
                  :label="item.bridgeName"
                  :value="item.bridgeName"
                />
              </el-select> 
            </div>              
            <div class="more" @click="isShowMore5 = !isShowMore5">{{ isShowMore5 === false? '查看更多 >>' : '返回 >>' }}</div>
          </div>
          <div v-show="isShowMore5 === false">  
            <div class="count">
              <div class="count-item">
                <div class="icon">
                  <img src="../../assets/images/large-screen/ql-one.png" alt="">
                </div>
                <div class="info">
                  <div class="name">内河等级航道桥梁数量</div>
                  <div class="value">{{ departBridgeTotal || "--" }}</div>
                </div>
              </div>
              <div class="count-item">
                <div class="icon">
                  <img src="../../assets/images/large-screen/ql-two.png" alt="">
                </div>
                <div class="info">
                  <div class="name">已安装终端净高的桥梁数</div>
                  <div class="value">{{ clearHeightBridgeInstallSum || "--" }}</div>
                </div>
              </div>
            </div>
            <div class="subtitle">各区域中心内河等级航道桥梁分布图</div>    
            <div id="eighth-chart" style="height: 300px;"></div>
          </div> 
          <div v-show="isShowMore5 === true">  
            <div class="bridge-image" v-if="bridgeImage">
              <img :src="`${baseApi}${bridgeImage}`" @error="e => { e.target.src = errorImg }">        
            </div>
            <!-- <div class="bridge-info">
              <div class="info-item">
                <div class="name">桥梁编号</div>
                <div class="value">{{ clearHeightTrendChartStaticData[0]?.ql_bh }}</div>
              </div>
              <div class="info-item">
                <div class="name">桥梁类型</div>
                <div class="value">{{ clearHeightTrendChartStaticData[0]?.c_bridgelx }}</div>
              </div>
              <div class="info-item">
                <div class="name">所在位置</div>
                <div class="value">{{ clearHeightTrendChartStaticData[0]?.c_address }}</div>
              </div>
              <div class="info-item">
                <div class="name">所在航道</div>
                <div class="value">{{ clearHeightTrendChartStaticData[0]?.wateway }}</div>
              </div>
            </div> -->
            <div class="single-count">
              <div class="left">
                <div class="icon">
                  <img src="../../assets/images/large-screen/ql-three.png" alt="">
                </div>
                <div class="name">通航孔净高值</div>
              </div>   
              <div class="value">{{ upClearHeight }}m</div>           
            </div>
            <div class="subtitle">净高值历史监测情况</div>
            <div id="ninth-chart" style="height: 200px;width: 464px;"></div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <div style="display: flex;">
              <div class="title" :class="isActive4 === '水位监测'?'active':''" @click="changeActive4('水位监测')">水位监测</div>
              <!-- <div class="title" :class="isActive4 === '流速流量'?'active':''" @click="changeActive4('流速流量')">流速流量</div> -->
            </div>     
            <el-select
              v-model="waterStation"
              filterable
              placeholder="请选择"
              @change="changeWaterStation"
              v-show="isActive4 === '水位监测'"
              style="width: 200px;"
            >
              <el-option
                v-for="item in waterStationData"
                :key="item.monitorStation"
                :label="item.monitorStation"
                :value="item.monitorStation"
              />
            </el-select>        
          </div>
          <div v-show="isActive4 === '水位监测'">
            <div class="single-count">
              <div class="left">
                <div class="icon">
                  <img src="../../assets/images/large-screen/sw-one.png" alt="">
                </div>
                <div class="name">水位检测站数量</div>
              </div>   
              <div class="value">{{ waterlevelStationSum || "--" }}</div>           
            </div>
            <div class="subtitle">水位检测趋势</div>
            <div id="tenth-chart" style="height: 300px;"></div>
          </div>
          <div v-show="isActive4 === '流速流量'">
            <div class="subtitle">流速流量信息分析</div>
            <div class="my-table">
              <el-table :data="lslxStaticData" style="width: 100%" height="360">
                <el-table-column prop="cHangdmc" label="所在航段" />
                <el-table-column prop="speed" label="最大流速" />
                <el-table-column prop="flow" label="流量" />
                <el-table-column prop="qylx" label="区域类型" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="statistics">
          <div class="list">
            <div class="item">
              <div class="name">
                <img src="../../assets/images/large-screen/hdzlc.png" alt="">
                <div>航道总里程(公里)</div>
              </div>
              <div class="value">{{ provinceWaterwayData.totalMileageOfWaterwayProvince }}</div>
            </div>
            <div class="item">
              <div class="name">
                <img src="../../assets/images/large-screen/hbzs.png" alt="">
                <div>航标总数(座)</div>
              </div>
              <div class="value">{{ provinceWaterwayData.totalNumNavigationMarks }}</div>
            </div>
            <div class="item">
              <div class="name">
                <img src="../../assets/images/large-screen/czzs.png" alt="">
                <div>船闸总数(座)</div>
              </div>
              <div class="value">{{ provinceWaterwayData.totalNumLocks }}</div>
            </div>
          </div>
          <div class="point-out">
            <div class="name">区域中心</div>
            <img src="../../assets/images/large-screen/provincialCenter1.png" alt="">
          </div>
        </div> 
      </div>
      <div class="side-content">
        <div class="item" style="margin-bottom: 12px;">
          <div class="top">
            <div class="title">视频监控</div>             
          </div>
          <div class="video-content">
            <div class="video-count">
              <div class="count-item" style="margin-right: 8px;">
                <img src="../../assets/images/large-screen/video-one.png" alt="">
                <div class="name">已接入船闸视频</div>
                <div class="value">{{ videoNumObj.chuanzhaNum }}</div>
              </div>
              <div class="count-item">
                <img src="../../assets/images/large-screen/video-two.png" alt="">
                <div class="name">已接入水上视频</div>
                <div class="value">{{ videoNumObj.shuimianNum }}</div>
              </div>
            </div>
            <div class="video-details">
              <div class="video-list">
                <el-select
                  v-model="videoType" 
                  @change="videoTypeChange"
                  style="margin-right: 2%;"
                >
                  <el-option
                    v-for="item in videoTypeList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
                <el-tree-select
                  v-model="currentVideo"
                  :data="videoCategoryData"
                  :props="{
                    children: 'children',
                    label: 'name',
                    value: 'id'
                  }"
                  node-key="id"
                  :render-after-expand="false"
                  @node-click="handleNodeClick"
                />        
              </div>
              <div class="video">
                <video 
                  id="myVideo" 
                  class="video-js vjs-default-skin vjs-big-play-centered" 
                  style="object-fit: fill;width: 100%;height: 100%;"                            
                >
                </video>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <div class="title">航道通告</div>             
          </div>
          <div class="notice" v-for="(item,index) in noticeData" :key="index">
            <div @click="handleClick(item.linkurl)">
              <div class="title">{{ item.title }}</div>
              <div class="bottom">
                <div class="source">来源：{{ item.source }}</div>
                <div class="release-time">发布时间：{{ item.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick, onUnmounted } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();

  //引入echarts
  import * as echarts from "echarts/core";
  import {
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    DataZoomComponent,
  } from "echarts/components";
  import { LabelLayout } from 'echarts/features';
  import { BarChart, LineChart, PieChart } from "echarts/charts";
  import { CanvasRenderer } from "echarts/renderers";

  echarts.use([
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    BarChart,
    LineChart,
    PieChart,
    CanvasRenderer,
    DataZoomComponent,
    LabelLayout
  ]);

  //引入videojs
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
  videojs.addLanguage('zh-CN',VideojsZhcnLanguage);

  import errorImg from "../../assets/images/large-screen/no-image.png";

  //引入api
  import { 
    //全省数据
    getProvinceWaterwayData,
    //桥梁净高监测
    regionChart,
    clearHeightDetail,
    getAllBridge,
    clearHeightTrendChart,
    //水位监测详情
    waterlevelDetail,
    getWaterStation,
    trendChart,
    //视频监控
    getVideoNum,
    videoCategory,
    playVideo,
    //航道通告
    getWaterwayNoticeThree,
    //桥梁动态通航净高数据
    clearHeightTrendChartStatic,
    //流量流速
    lslxStatic,
  } from "@/bridge-h5/utils/apis";

  //地图
  import OlArc from "./olArcChannel.vue";
  const OlArcRef = ref(null); 

  //全省数据
  const provinceWaterwayData = ref({});
  const getProvinceWaterwayDataFn = () => {
    getProvinceWaterwayData().then((res) => {
      if(res.code === 200 && res.data.length){
        provinceWaterwayData.value = res.data[0];
      }      
    });
  };

  //桥梁净高监测
  const isShowMore5 = ref(false);
  const departBridgeTotal = ref('');
  const xAxisEighthData = ref([]);
  const seriesEighthData = ref([]);
  const regionChartFn = () => {
    regionChart().then((res) => {
      if(res.code === 200 && res.data.length){
        departBridgeTotal.value = res.data[0].departBridgeTotal;
        let data = res.data[0].regionBridgeTotal;
        data.forEach((item) => {
          xAxisEighthData.value.push(item.regionName);
          seriesEighthData.value.push(item.regionBridgeTotal);
        });
        initEighthChart();
      }
    });
  };
  const initEighthChart = () => {
    let eighthChart = echarts.getInstanceByDom(document.getElementById("eighth-chart"));
    if(eighthChart != null && eighthChart != "" && eighthChart != undefined){
      eighthChart.dispose();
    }
    eighthChart = echarts.init(document.getElementById('eighth-chart'));

    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true, //限制在图表区域内
      },
      grid: {
        top: '15%',
        left: '5%',
        right: '15%',
        bottom: '5%',
        containLabel: true
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: 'category',
        name: '区域中心',        
        data: xAxisEighthData.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
      },
      yAxis: {
        type: 'value',
        name: '数量',
        nameTextStyle: {
          padding: [0,30,0,0]
        },
      },
      series: [
        {
          name: '等级航道桥梁',
          data: seriesEighthData.value,
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            color: '#0051FF'
          },
          label: {
            show: true,
            position: 'top',           
          },
        }
      ]
    };
    option && eighthChart.setOption(option);
  };
  const clearHeightBridgeInstallSum = ref('');
  const clearHeightDetailFn = () => {
    clearHeightDetail("","","").then((res) => {
      if(res.code === 200 && res.data.length){
        clearHeightBridgeInstallSum.value = res.data[0].clearHeightBridgeInstallSum;   
      }
    });
  };
  const bridge = ref("");
  const regionName = ref("");
  const bridgeData = ref([]);
  const getAllBridgeFn = () => {
    getAllBridge().then((res) => {
      if(res.code === 200 && res.data.length){
        bridge.value = res.data[0].bridgeName;
        regionName.value = res.data[0].regionName;
        bridgeData.value = res.data;
        clearHeightTrendChartFn();
        // clearHeightTrendChartStaticFn();
      }
    });
  };
  const changeBridge = (value) => {
    bridge.value = value;
    bridgeData.value.forEach((item) => {
      if(value === item.bridgeName){
        regionName.value = item.regionName;
        clearHeightTrendChartFn();
        // clearHeightTrendChartStaticFn();
      }
    });  
  };
  const upClearHeight = ref('');
  const baseApi = `${import.meta.env.VITE_APP_BASE_API}attach/img`
  const bridgeImage = ref('');
  const xAxisNinthData = ref([]);
  const seriesNinthData = ref([]);
  const clearHeightTrendChartFn = () => {
    let time = new Date().getTime();
    let endTime = time - 7 * 24 * 3600 * 1000;
    clearHeightTrendChart(bridge.value, regionName.value, new Date(endTime).format('yyyy-MM-dd'), new Date(time).format('yyyy-MM-dd')).then((res) => {
      if(res.code === 200 && res.data.length){
        let data = res.data[0];
        upClearHeight.value = data.upClearHeight;
        if(data.bridgeImage!=null && data.bridgeImage!='' && data.bridgeImage != undefined){
          bridgeImage.value = data.bridgeImage.split('img')[1];
        }     
        xAxisNinthData.value = [];
        seriesNinthData.value = [];
     
        if(data.clearHeightHistoryData.length){
          let chartData = sortClass(data.clearHeightHistoryData);
          if(chartData.length === 1){
            let arr = [];
            chartData[0].forEach((item) => {
              xAxisNinthData.value.push(item.updateTime.slice(5,10));
              arr.push({ 
                name: item.jgdMc,
                value: item.cJgz,
              });
            });
            seriesNinthData.value = [
              {
                data: arr,
                type: 'line',
                itemStyle: {
                  color: '#0051FF'
                },
              }
            ];
          }else{
            let arr1 = [];
            let arr2 = [];
            chartData[0].forEach((item) => {
              xAxisNinthData.value.push(item.updateTime.slice(5,10));
              arr1.push({ 
                name: item.jgdMc,
                value: item.cJgz,
              });
            });
            chartData[1].forEach((item2) => {           
              arr2.push({ 
                name: item2.jgdMc,
                value: item2.cJgz,
              });
            });
            seriesNinthData.value = [
              {
                data: arr2,
                type: 'line',
                itemStyle: {
                  color: '#91cc75'
                },
              },
              {
                data: arr1,
                type: 'line',
                itemStyle: {
                  color: '#75a7d4'
                },
              },            
            ];  
          }  
        }
        initNinthChart();
      }
    });
  };
  //数组分类
  const sortClass = (sortData) => {
    const groupBy = (array, f) => {
      let groups = {};
      array.forEach((o) => {
        let group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map((group) => {
        return groups[group];
      });
    };
    const sorted = groupBy(sortData, (item) => {
      return item.jgdMc; // 返回需要分组的对象
    });
    return sorted;
  };
  const initNinthChart = () => {
    nextTick(() => {
      let ninthChart = echarts.getInstanceByDom(document.getElementById("ninth-chart"));
      if(ninthChart != null && ninthChart != "" && ninthChart != undefined){
        ninthChart.dispose();
      }
      ninthChart = echarts.init(document.getElementById('ninth-chart'));

      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
          formatter: function (params) {
            let template = `${params[0].axisValue}<br>`;         
            for(let i = 0; i < params.length; i++){
              let item = params[i];
              template += item.marker + item.data.name + ': ' + item.data.value + '<br>'
              // return params[x].data.name + ':' + params[x].data.value
            }  
            return template  
          },        
        },
        grid: {
          top: '25%',
          left: '5%',
          right: '12%',
          bottom: '10%',
          containLabel: true
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            maxValueSpan: 60,
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          name: '时间',        
          data: xAxisNinthData.value,
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
        },
        yAxis: {
          type: 'value',
          name: '净高值（m）',
        },
        series: seriesNinthData.value
      };
      option && ninthChart.setOption(option);
    });
  };
  //桥梁动态通航净高数据
  const clearHeightTrendChartStaticData = ref([]);
  const clearHeightTrendChartStaticFn = () => {
    let time = new Date().getTime();
    let endTime = time - 7 * 24 * 3600 * 1000;
    clearHeightTrendChartStatic(bridge.value, regionName.value, new Date(endTime).format('yyyy-MM-dd'), new Date(time).format('yyyy-MM-dd')).then((res) => {
      if(res.code === 200 && res.data.length){
        clearHeightTrendChartStaticData.value = res.data;
      }
    });
  };

  //水位监测详情
  const waterlevelStationSum = ref('');
  const waterlevelDetailFn = () => {
    waterlevelDetail("","","").then((res) => {
      if(res.code === 200 && res.data.length){
        waterlevelStationSum.value = res.data[0].waterlevelStationSum;
      }
    });
  };
  const waterStation = ref("");
  const waterStationData = ref([]);
  const getWaterStationFn = () => {
    getWaterStation().then((res) => {
      if(res.code === 200 && res.data.length){
        waterStation.value = res.data[0].monitorStation;
        waterStationData.value = res.data;
        trendChartFn();
      }
    });
  };
  const changeWaterStation = (value) => {
    waterStation.value = value;
    trendChartFn();
  };
  const xAxisTenthData = ref([]);
  const seriesTenthData = ref([]);
  const trendChartFn = () => {
    let time = new Date().getTime();
    let endTime = time - 7 * 24 * 3600 * 1000;
    trendChart(waterStation.value,new Date(endTime).format('yyyy-MM-dd'),new Date(time).format('yyyy-MM-dd')).then((res) => {
      if(res.code === 200){
        xAxisTenthData.value = [];
        seriesTenthData.value = [];
        res.data.forEach((item) => {
          xAxisTenthData.value.push(item.reporttime.slice(5,10));       
          seriesTenthData.value.push(item.waterlevelValue);
        });
        initTenthChart();
      }
    });
  };
  const initTenthChart = () => {
    nextTick(() => {
      let tenthChart = echarts.getInstanceByDom(document.getElementById("tenth-chart"));
      if(tenthChart != null && tenthChart != "" && tenthChart != undefined){
        tenthChart.dispose();
      }
      tenthChart = echarts.init(document.getElementById('tenth-chart'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '12%',
          bottom: '5%',
          containLabel: true
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          name: '时间',
          data: xAxisTenthData.value,
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
        },
        yAxis: {
          type: 'value',
          name: '水位值（m）',
        },
        series: [
          {
            data: seriesTenthData.value,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          }
        ]
      };
      option && tenthChart.setOption(option);
    });
  };
  const isActive4 = ref("水位监测");
  const changeActive4 = (val) => {
    isActive4.value = val;
  };

  //视频监控
  const videoNumObj = ref({});
  const getVideoNumFn = () => {
    getVideoNum().then((res) => {
      if(res.code === 200){
        videoNumObj.value = res.data[0];
      }
    });
  };
  const videoType = ref("水上视频");
  const videoTypeList = [
    { name: '船闸视频' },
    { name: '水上视频' }
  ];
  const currentVideo = ref("");
  const videoCategoryData = ref([]);
  const videoTypeChange = () => {
    currentVideo.value = "";
    videoCategoryFn();
  };
  const videoCategoryFn = () => {
    videoCategory(
      videoType.value === "船闸视频"? 1 : 2
    ).then((res) => {
      if(res.code === 200 && res.data){
        videoCategoryData.value = res.data[0].children;
        currentVideo.value = videoType.value === "船闸视频"? res.data[0].children[0].children[0].children[1].id : res.data[0].children[0].children[0].children[0].id;

        playVideoFn();
      }
    });
  };
  const handleNodeClick = (val) => {    
    if(val.children.length === 0){
      currentVideo.value = val.id;
      playVideoFn();
    }
  };
  const initVideo = () => {
    videojs("myVideo",{
      language: 'zh-CN',  //汉化
      autoplay: true, // true,浏览器准备好时开始播放
      loop: true, // 导致视频一结束就重新开始
      controls: true, //取消视频中的进度条
      muted: true, //是否静音
      preload: 'metadata', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）      
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息
      textTrackDisplay: false,
      techOrder: ['html5', 'flash']
    });  
  };
  const playVideoFn = () => {
    playVideo(currentVideo.value).then((res) => {
      if(res.code === 200 && res.data){
        const myPlayer = videojs("myVideo"); 
        myPlayer.src([
          {
            type: 'application/x-mpegURL',
            src: res.data.url, //视频播放地址
          }
        ]); 
        myPlayer.play();          
      }
    });
  };

  //航道通告
  const noticeData = ref([]);
  const getWaterwayNoticeThreeFn = () => {
    getWaterwayNoticeThree().then((res) => {
      if(res.code === 200 && res.data.length){           
        noticeData.value = res.data;  
      }
    });
  };
  const handleClick = (contents) => {    
    let fileUrl = `${import.meta.env.VITE_APP_BASE_API}admin/file` + contents.split("/file")[1];
    window.open(fileUrl);
    // try{
    //   let reg = /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi      
    //   if(contents.match(reg)){         
    //     window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25,-2)}`);   
    //   }else{
    //     let matchReg = /<img.*?(?:>|\/>)/gi;
    //     let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
    //     let data = [];
    //     let arr = contents.match(matchReg);
    //     arr.forEach(item => {
    //       let src = item.match(srcReg);
    //       data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`)
    //     });

    //     router.push({
    //       path: "/pdf",
    //       query: { content: data.join(',') },
    //     });
    //   }   
    // }catch(error){
    //   // alert(error)
    // }    
  };

  //流量流速
  const lslxStaticData = ref([]);
  const lslxStaticFn = () => {
    lslxStatic().then((res) => {
      if(res.code === 200 && res.data.length){
        lslxStaticData.value = res.data;
      }
    });
  };

  onMounted(() => {
    document.title = "智慧航道";
    //全省数据
    getProvinceWaterwayDataFn();
    //桥梁净高监测
    regionChartFn();
    clearHeightDetailFn();
    getAllBridgeFn();
    //水位监测
    waterlevelDetailFn();
    getWaterStationFn();  
    //视频监控
    getVideoNumFn();
    videoCategoryFn();
    initVideo();
    //航道通告
    getWaterwayNoticeThreeFn();
    // //流量流速
    //lslxStaticFn();
  });
  onUnmounted(() => {
    setTimeout(() => {
      const myPlayer = videojs("myVideo");    
      if(myPlayer){
        myPlayer.dispose();
      }   
    }, 1000);   
  });
</script>

<style lang="scss" scoped>
   @font-face{
    font-family: Din;
    src: url("../../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../../assets/fonts/tx.ttf");
  }
  .container{    
    width: 1920px;
    height: 1080px;
    box-sizing: content-box;   
    .header{
      height: 40px;    
      display: flex;
      align-items: center;  
      justify-content: space-between; 
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
      border-radius: 4px;  
      margin: 16px 16px 0px 16px; 
      padding: 0 16px;
      .title{
        font-family: 'Tx';
        font-weight: 500;
        font-size: 18px;
        color: #262626;
      }
      .menu{
        display: flex;
        align-items: center;
        .item{
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          padding: 6px 18px;
          border-radius: 4px;
        }
        .active{
          color: #FFFFFF;
          background: #0051FF;
        }
      }
    }
    .main{
      box-sizing: content-box;
      height: 1024px;
      margin: 16px;      
      display: flex;
      .side-content{
        width: 464px;
        height: 992px;        
        box-sizing: content-box;
        .item{
          height: 490px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 4px;
          .top{
            height: 48px;
            line-height: 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
            .title{              
              font-weight: 500;
              font-size: 18px;
              color: #595959;
              margin-right: 10px;
            }
            .more{
              font-weight: 400;
              font-size: 14px;
              color: #0051FF;
            }
            .active{
              color: #262626;
              font-weight: bold;
            }
          }
          .subtitle{
            height: 40px;
            line-height: 40px;
            font-weight: 500;
            font-size: 16px;
            color: #262626;    
            border-bottom: 1px solid #F0F0F0;
            padding-left: 16px;
          }
          .count{
            display: flex;
            justify-content: space-between;
            margin: 16px 8px 8px 8px;
            .count-item{
              margin-right: 8px;
              width: 50%;
              display: flex;
              background: #FFFFFF;
              box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
              border-radius: 8px;
              border: 1px solid #F0F0F0;
              .icon{
                width: 32px;
                height: 32px;
                margin: 16px 8px 0px 4px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .info{
                margin: 8px 0;
                .name{
                  color: #595959;
                  font-size: 14px;
                  font-weight: 500;
                }
                .value{
                  font-family: 'Din';
                  font-weight: 800;
                  font-size: 20px;
                  color: #262626;
                }
              }
            }
          }  
          .single-count{
            display: flex;
            justify-content: space-between;
            align-items: center;   
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
            border-radius: 8px;
            border: 1px solid #F0F0F0; 
            margin: 8px 16px;  
            padding: 8px 16px;     
            .left{
              display: flex;
              align-items: center;
              .icon{
                width: 32px;
                height: 32px;
                margin-right: 4px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .name{
                font-size: 16px;
                font-weight: 500;
              }
            }  
            .value{
              font-family: 'Din';
              font-size: 20px;
              font-weight: bold;
              padding-right: 20px;
            }            
          }
          .bridge-image{
            width: 432px;
            height: 130px;
            margin: 8px 0;
            padding: 0 16px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .video-content{
            .video-count{
              display: flex;
              justify-content: space-between;
              margin: 16px;
              .count-item{
                width: 50%;   
                background: #FFFFFF;
                box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
                border-radius: 8px;
                border: 1px solid #F0F0F0;    
                padding: 8px 0;         
                img{
                  width: 32px;
                  height: 32px;
                  padding-left: 16px;
                }
                .name{
                  font-size: 16px;
                  font-weight: 500;
                  margin-bottom: 4px;
                  margin-left: 20px;
                }
                .value{
                  font-family: 'Din';
                  font-size: 20px;
                  font-weight: bold;
                  margin-left: 20px;
                }
              }                
            }
            .video-details{
              margin: 16px;
              .video-list{
                display: flex;
              }
              .video{
                width: 432px;
                height: 240px;
                margin-top: 10px;
              }
            }
          }
          .notice{           
            margin: 16px;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
            border-radius: 8px;
            border: 1px solid #F0F0F0; 
            .title{
              font-size: 14px;
              font-weight: 500;
              color: #262626;
              padding: 20px 20px 15px 20px;
            }
            .bottom{
              display: flex;
              justify-content: space-between;
              padding: 10px 20px;
              font-size: 12px;
              font-weight: 400;
              color: #595959;
            }
          }
          .bridge-info{
            height: 46px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 16px;
            .info-item{
              width: 48%;
              display: flex;
              justify-content: space-between;
              font-size: 12px;                
              margin: 0 1%;
              color: #595959;
              .value{
                color: #262626;
              }
            }
          }
        }
      }
      .middle-content{
        width: 928px;
        height: 992px;
        margin: 0 16px;
        box-sizing: content-box;
        position: relative;
        .statistics{
          width: 280px;       
          position: absolute;
          top: 16px;
          left: 16px;
          background: rgba(5,48,68,0.8);
          .list{
            margin: 16px 16px 0px 16px;              
            .item{
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 8px;
              .name{
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 38px;
                img{
                  width: 16px;
                  height: 16px;
                  padding-right: 4px;
                }
              }
              .value{
                font-size: 24px;
                font-weight: bold;
                color: #78DFFF;
              }
            }
          }
          .point-out{
            height: 40px;
            background: rgba(4,35,54,0.8);
            font-size: 16px;
            font-weight: 500;
            color: #FFFFFF;
            padding-left: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            img{
              width: 22px;
              height: 22px;
              padding-right: 12px;
            }
          }
        }
      }
    }
  }
</style>